<template>
	<view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
		<view v-if="!isImage" class="tn-empty__icon" :class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]"
			:style="[iconStyle]"></view>
		<image v-else class="tn-empty__image" :style="[imageStyle]" :src="icon || '/static/error/common.png'" mode="widthFix"></image>

		<view class="tn-empty__text" :style="[textStyle]">{{ text ? text : icons[mode]}}</view>
		<view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
			<slot />
		</view>

<!-- 		<view class="margin-24">
			<view class="author">
				<view>应用归属单位</view>
				<view>用管家</view>
			</view>
			<view class="author">
				<view>应用管理员</view>
				<view>用管家</view>
			</view>
			<view class="author">
				<view>联系方式</view>
				<view>15336666898</view>
			</view>
		</view> -->


	</view>
</template>

<script>
	export default {
		name: 'tn-empty',
		props: {
			// 显示空白页
			show: {
				type: Boolean,
				default: true
			},
			// 内置icon的名称
			// 图片路径，建议使用绝对路径
			icon: {
				type: String,
				default: ""
			},
			// 预置图标类型
			mode: {
				type: String,
				default: 'data'
			},
			// 提示文字
			text: {
				type: String,
				default: ''
			},
			// 文字颜色
			textColor: {
				type: String,
				default: ''
			},
			// 文字大小，单位rpx
			textSize: {
				type: Number,
				default: 0
			},
			// 图标颜色
			iconColor: {
				type: String,
				default: ''
			},
			// 图标大小，单位rpx
			iconSize: {
				type: Number,
				default: 0
			},
			// 图片宽度（当图标为图片时生效），单位rpx
			imgWidth: {
				type: Number,
				default: 0
			},
			// 图片高度（当图标为图片时生效），单位rpx
			imgHeight: {
				type: Number,
				default: 0
			},
			// 自定义组件样式
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			emptyStyle() {
				let style = {}
				Object.assign(style, this.customStyle)
				return style
			},
			iconStyle() {
				let style = {}
				if (this.iconSize) {
					style.fontSize = this.iconSize + 'rpx'
				}
				if (this.iconColor) {
					style.color = this.iconColor
				}
				return style
			},
			imageStyle() {
				let style = {}
				if (this.imgWidth) {
					style.width = this.imgWidth + 'rpx'
				}
				if (this.imgHeight) {
					style.height = this.imgHeight + 'rpx'
				}
				return style
			},
			textStyle() {
				let style = {}
				if (this.textColor) {
					style.color = this.textColor
				}
				if (this.textSize) {
					style.fontSize = this.textSize + 'rpx'
				}
				return style
			},
			// 判断传递的icon是否为图片
			isImage() {
				return true
			}
		},
		data() {
			return {
				icons: {
					cart: '购物车为空',
					page: '抱歉，系统错误，您可以选择尝试清除缓存或联系管理员',
					search: '暂无相关搜索结果，请更换关键字搜索',
					address: '地址为空',
					// #ifndef MP-WEIXIN
					network: '该应用为钉钉内部应用，请使用钉钉打开',
					// #endif
					// #ifdef MP-WEIXIN
					network: '该应用暂不支持电脑端，请使用手机微信打开',
					// #endif
					order: '订单为空',
					coupon: '优惠券为空',
					favor: '暂无收藏',
					permission: '抱歉，您暂无当前页面的访问权限，请联系管理员',
					history: '历史记录为空',
					message: '暂无相关内容',
					list: '列表为空',
					data: '暂无相关内容',
					comment: '暂无相关内容'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.author {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 50rpx;
	}

	.margin-24 {
		margin-top: 50rpx;
		width: 100%;
		color: #999;
		font-size: 30rpx;
	}

	.tn-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 36rpx;
		position: absolute;
		width: 100vw;

		&__icon {
			margin-top: 14rpx;
			color: #999;
			font-size: 90rpx;
		}

		&__image {
			width: 400rpx;
			height: 400rpx;
			// 小程序特有的样式
			/* #ifdef MP */
			margin-top: 18vh;
			/* #endif */

			// H5特有的样式
			/* #ifdef H5 */
			margin-top: 17vh;
			/* #endif */
		}

		&__text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			color: #AAAAAA;
			font-size: 30rpx;
			width: 420rpx;
			text-align: center;
		}

		&__slot {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
		}
	}

</style>